<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	request.setAttribute("path", path);
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'dog.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="${path}/js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap.js"></script>
<link rel="stylesheet" href="${path}/css/bootstrap4.css" />

<style type="text/css">
body {
	font-family: "微软雅黑";
}

.btn-default-change {
	background-color: black !important;
	color: white !important;
}

.a-change {
	color: #FFFFFF !important;
}

.nav-right-change {
	right: 120px !important;
}

.shadow {
	display: none;
}
</style>

<script type="text/javascript">
function SelectCari(a){
if($.trim(a).length<=0){
alert("请先登录");
}else{
window.location.href="${path}/dog/SelectCari.html?username="+encodeURI(encodeURI(a));
}

}

</script>


<script>
		$(document).ready(function(){
			
			$(".carousel").carousel({
				
				interval:2000
			})
			
			
			
		

		});
		
		
		$(function() {

			$("#username2").focus(function() {

			});
			$("#username2").blur(function() {

				$.ajax({
					type : "post",
					dataType : "json",
					url : "${path}/dog/checktwice.html",
					data : {
						"username" : $("#username2").val(),

					},
					success : function(data) {
						var a = data;
						if (a > 0) {
						$("#s3").css("display","none");
						    $("#s2").show();
							/* alert("用户名已存在") */
						} else {
						$("#s2").css("display","none");
						$("#s3").show();
							/* alert("用户名可使用") */
						}

					},

					error : function(data) {

					}

				});

			});
		});

		$(function() {
			if ($("#w3").text() == "admin") {
				$("#l1").show();
				$("#w4").show();
				$("#w5").show();
				$("#w3").show();
				$("#w1").hide();
				$("#w2").hide();
			} else if ($.trim($("#w3").text()).length<=0 ) {
                $("#w1").show();
				$("#w2").show();
			} else {
				$("#l1").show();
				$("#w3").show();
				$("#w1").hide();
				$("#w2").hide();
			}

		});

		function register() {
		/* 	var username = $("#username2").val();
			var password = $("#password2").val();
			var email = $("#email").val();
			window.location.href = "${path}/dog/register.html?username="
					+ username + "&password=" + password + "&email=" + email;
			$("#email").val("");
			$("#password2").val("");
			$("#username2").val(""); */
			$.ajax({
			type:"post",
			dataType:"json",
			url:"${path}/dog/register.html",
			data:{
			"username":$("#username2").val(),
			"password":$("#password2").val(),
			"email":$("#email").val()
			},
			success:function(data){
			var a=data;
			if(a==1){
			alert("用户名已存在无法注册");
		/* 	$("#username2").val("");
			$("#password2").val("");
			$("#email").val(""); */
		/* 	window.location.reload(); */
			}else{
			$("#s2").css("display","none");
			$("#s3").css("display","none");
			$("#username2").val("");
			$("#password2").val("");
			$("#email").val(""); 
			$("#mymodal2").modal("hide");
			}
			
			},
			error:function(data){
			alert("失败");
			}
			
			});
			
			
			
		}
	</script>

<script>
	function down(){
			$("#mymodal2").modal("hide");
		    $("#email").val("");
			$("#password2").val("");
			$("#username2").val("");
			$("#s3").css("display","none");
			$("#s2").css("display","none");	
		}
	</script>

<script>
	function close(){
	$("#mymodal").modal("hide");
	$("#username1").val("");
	$("#password1").val("");
	
	}
	</script>

<script>
	function cht(){
	$.ajax({
	 type:"post",
	 dataType:"json",
	 url:"${path}/dog/logincheck.html",
	 data:{
	 "username":$("#username1").val(),
	 "password":$("#password1").val()
	 
	 },
	success:function(data){
	  var a=data;
	  if(a==1){
	  $("#username1").val("");
	  $("#password1").val("");
	    alert("登陆成功");
	   $("#mymodal").modal("hide");
	  <%--  window.location.href="<%=path%>/page/dog/dog.jsp"; --%>
	  window.location.reload();
	
	  }else if(a==0){
	   $("#username1").val("");
	  $("#password1").val("");
	  alert("用户名不存在");
	  $("#mymodal").modal("hide");
	  
	  window.location.reload();
	  alert("登录失败")
	  }
	  
	},
	
	error:function(data){
	
	}
	
	
	});
	
	}
	
	</script>

<script>

		function cleanSession() {
               window.location.href="${path}/dog/cleanSession.html";
		}
	</script>


</head>

<body>
	<!--
    	作者：531680280@qq.com
    	时间：2016-05-09
    	描述：denglumodal
    -->
	<div class="modal fade in" id="mymodal" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 500px;margin-left: 55px;">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<div class="form-group" style="padding: 20px;">
						<div class="input-group" style="margin-left: 70px;">
							<span class="input-group-addon"
								style="font-family: '微软雅黑';width: 60px;">用户名</span> <input
								id="username1" type="text" class="form-control"
								style="width: 220px;" />
						</div>
						<div class="input-group"
							style="margin-left: 70px;margin-top: 30px;">
							<span class="input-group-addon"
								style="font-family: '微软雅黑';width: 65px;">密码</span> <input
								id="password1" type="text" class="form-control"
								style="width: 220px;" />
						</div>

					</div>

				</div>
				<div class="modal-footer">
					<div class="btn-group">
						<button type="button" class="btn btn-primary" onclick="cht()">登录</button>
						<button type="button" class="btn btn-default" data-dismiss="modal"
							onclick="close()">取消</button>
					</div>
				</div>
			</div>

		</div>

	</div>


	<!--
    	作者：531680280@qq.com
    	时间：2016-05-09
    	描述：注册modal
    -->

	<div class="modal fade in" id="mymodal2" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 500px;margin-left: 55px;">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<div class="form-group" style="padding: 20px;">
						<div class="input-group" style="margin-left: 60px;">
							<span class="input-group-addon"
								style="font-family: '微软雅黑';width: 60px;">用户名</span> <input
								id="username2" type="text" class="form-control"
								style="width: 220px;" /> <span id="s2"
								style="font-size: 2px;color: red;" class="shadow">*用户名已存在</span>
							<span id="s3" style="font-size: 2px;color: green;" class="shadow">*用户名可使用</span>
						</div>
						<div class="input-group"
							style="margin-left: 60px;margin-top: 30px;">
							<span class="input-group-addon"
								style="font-family: '微软雅黑';width: 65px;">密码</span> <input
								id="password2" type="text" class="form-control"
								style="width: 220px;" />
						</div>
						<div class="input-group"
							style="margin-left: 60px;margin-top: 30px;">
							<span class="input-group-addon"
								style="font-family: '微软雅黑';width: 65px;">邮箱</span> <input
								id="email" type="text" class="form-control"
								style="width: 220px;" />
						</div>

					</div>

				</div>
				<div class="modal-footer">
					<div class="btn-group">
						<button type="button" class="btn btn-primary" onclick="register()">注册</button>
						<button type="button" class="btn btn-default" onclick="down()">取消</button>
					</div>
				</div>
			</div>

		</div>

	</div>



	<!--
        	作者：531680280@qq.com
        	时间：2016-05-09
        	描述：主界面一
        -->
	<div>
		<nav class="navbar navbar-inverse navbar-fixed-top"
			style="height: 86px;">
			<div class="container">
				<div class="row">
					<div class="navbar-header">
						<span class="navbar-brand"><a
							href="${path}/page/dog/dog.jsp"><img
								src="${path}/picture/dog.jpg" width="70px" height="60px">
						</a> </span>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;margin-left: 70px;">
							<li class="dropdown"><a data-toggle="dropdown"
								class="dropdown-toggle ">&nbsp;&nbsp;&nbsp;购买地点&nbsp;&nbsp;&nbsp;<span
									class="caret" style="width: 10px;height: 4px;"></span> </a>
								<ul class="dropdown-menu">
									<li><a>3</a></li>
									<li><a>2</a></li>
									<li><a>1</a></li>
								</ul>
							</li>

						</ul>
					</div>
					<div>
						<ul id="w4" class="nav navbar-nav navbar-left shadow"
							style="font-size: 20px;margin-top: 20px;">
							<li><a>|</a></li>
						</ul>
					</div>
					<div>
						<ul id="w5" class="nav navbar-nav navbar-left shadow"
							style="font-size: 20px;margin-top: 20px;">
							<li><a href="${path}/dog/selectDog.html?pageNo=1">狗狗管理</a></li>
						</ul>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;">
							<li><a>|</a></li>
						</ul>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;">
							<li><a href="${path}/dog/selectDog.html?pageNo=1">狗狗购买</a></li>
						</ul>
					</div>
					<div>
						<form class="navbar-form navbar-right" style="margin-top: 28px;">
							<div class="form-group">
								<div class="input-group">
									<!-- <input type="text" class="form-control"
										placeholder="查询狗狗名字...." /> <span class="input-group-addon"><a
										onclick="" class="glyphicon glyphicon-search a-change"></a>
									</span> -->
								</div>


								<div class="btn-group dropdown">
									<button id="w1" type="button" class="btn btn-default-change"
										data-toggle="modal" data-target="#mymodal">
										<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Sign
										in
									</button>
									<button id="w2" type="button" class="btn btn-default-change"
										data-toggle="modal" data-target="#mymodal2">Register</button>


									<a id="w3"
										style="margin-left: 25px;margin-right: 25px;color: white;"
										class="dropdown-toggle" data-toggle="dropdown">${username}<span
										class="caret shadow" id="s1"></span> </a>

									<ul class="dropdown-menu nav-right-change">
										<li class="shadow" id="l1"><a onclick="cleanSession()"><span
												class="glyphicon glyphicon-log-out"></span>&nbsp;logout</a></li>
									</ul>
									<a onclick="SelectCari('${username}')"><button
											type="button" class="btn btn-default-change">
											<span class="glyphicon glyphicon-send"></span>&nbsp;&nbsp;购物车
										</button> </a>
								</div>

							</div>
						</form>

					</div>
				</div>
			</div>
		</nav>
	</div>



	<div style="background: url(picture/background1.jpg)">
		<div class="container">
			<div class="row">
				<div class="carousel slide" id="myCarousel"
					style="width: 705px;margin-top: 150px;">

					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
						<li data-target="#myCarousel" data-slide-to="3"></li>
					</ol>
					<div class="carousel-inner">
						<div class="item active">
							<img src="picture/item9.jpg" width="705px" height="350px"
								alt="First" />
						</div>
						<div class="item">
							<img src="picture/item6.jpg" width="705px" height="350px"
								alt="Second" />
						</div>
						<div class="item">
							<img src="picture/item7.jpg" width="705px" height="350px"
								alt="Thrid" />
						</div>
						<div class="item">
							<img src="picture/item8.jpg" width="705px" height="350px"
								alt="Thrid" />
						</div>
					</div>
					<a class="carousel-control left" href="#myCarousel"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#myCarousel" data-slide="next">&rsaquo;</a>
				</div>
			</div>
		</div>

	</div>




	<!--
         	作者：531680280@qq.com
         	时间：2016-05-09
         	描述：主界面二
         -->

	<div style="background-color:#000000;height: 95px;">
		<div class="container">
			<div class="row">
				<form class="form-horizontal">
					<div
						style="margin-top: 30px;margin-left:80px;font-family: arial;font-size: 20px;">
						<strong><a><span
								class="glyphicon glyphicon-globe a-change">:www.lovedog.com</span>
						</a> </strong> <strong><a style="margin-left: 130px;"><span
								class="glyphicon glyphicon-phone a-change">:0592-18850577480</span></span>
						</a> </strong> <strong><a style="margin-left: 150px;font-size: 20px;"><span
								class="glyphicon glyphicon-user a-change">:陈先生</span></span> </a> </strong>
					</div>

				</form>

			</div>
		</div>
	</div>


	</div>

</body>
</html>
